<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:28
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:15:41
 * @FilePath: \i-hos-app\shared\emr\src\components\common\TableEdit.vue
 * @Description: 表格插入行列选项组件
-->
<template>
  <div class="tableEdit">
    <div class="tdNum"
      ><span>{{ tdRowCell.row }}</span
      >行X<span>{{ tdRowCell.cell }}</span
      >列</div
    >
    <table class="tablCell" border="0" cellspacing="1" cellpadding="0" @click="addTable">
      <tbody>
        <tr v-for="o in 20" :key="o">
          <td
            :class="[o <= tdRowCell.row && n <= tdRowCell.cell ? 'active' : '']"
            v-for="n in 20"
            :key="o + n"
            @mousemove="handHover"
          ></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
  import { ref, Ref } from 'vue'
  // 接口约束
  import { IRowCell } from '../../interface/page'
  // 初始化添加表格行列
  let tdRowCell: Ref<IRowCell> = ref({
    row: 0,
    cell: 0,
  })
  // 鼠标经过td，判断在多少行列
  const handHover = (e: any): void => {
    tdRowCell.value.row = e.target.parentNode.rowIndex + 1
    tdRowCell.value.cell = e.target.cellIndex + 1
  }
  // 定义向父组件传值的事件
  const $emit = defineEmits<{
    (e: 'toAddTableRowCell', tdRowCell: Ref<IRowCell>): void
  }>()
  // 添加表格
  const addTable = (): void => {
    $emit('toAddTableRowCell', tdRowCell)
  }
</script>

<style scoped lang="scss">
  .tableEdit {
    display: flex;
    flex-direction: column;
    .tdNum {
      font-size: var(--theme-font-size);
      span {
        font-size: 16px;
      }
    }
    .tablCell {
      border-right: 1px solid #e9e9e9;
      padding-right: 15px;
      td {
        width: 15px;
        height: 15px;
        border: 1px solid #999;
        font-size: var(--theme-font-size);
        overflow: hidden;
        cursor: pointer;
        &.active {
          background-color: #409eff;
        }
      }
    }
  }
</style>
